﻿<MRow Class="hover-props-open">
    <MCol Cols="12" Sm="6">
        <MHover OpenDelay="200">
            <MCard @attributes="context.Attrs" Class="mx-auto" Elevation="@(context.Hover ? 16 : 2)" Height="350" MaxWidth="350">
                <MCardText Class="font-weight-medium mt-12 text-center text-subtitle-1">
                    Open Delay (Mouse enter)
                </MCardText>
            </MCard>
        </MHover>
    </MCol>

    <MCol Cols="12" Sm="6">
        <MHover CloseDelay="200">
            <MCard @attributes="context.Attrs" Class="mx-auto" Elevation="@(context.Hover ? 16 : 2)" Height="350" MaxWidth="350">
                <MCardText Class="font-weight-medium mt-12 text-center text-subtitle-1">
                    Close Delay (Mouse leave)
                </MCardText>
            </MCard>
        </MHover>
    </MCol>
</MRow>

<style>
.hover-props-open .m-card.on-hover.theme--dark {
  background-color: rgba(255, 255, 255, 0.8);
}

.hover-props-open .m-card.on-hover.theme--dark > .m-card__text {
  color: #000;
}
</style>
